<template>
	<view class="mine-address">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'收货地址'"></navBar>
		</view>
		<view class="content">
			<!-- 我的 - status: 1 -->
			<block v-if="status == 1 || status == 3" v-for="(res, index) in addressList" :key="index">
				<view class="address-box">
					<view class="address-content-list">
						<view class="left">
							<image class="address-image" src="/static/images/mine/address/address.png" mode="widthFix">
							</image>
							<view class="address-content">
								<view class="name-phone">
									<text class="name">{{ res.name }}</text>
									<text class="phone">{{ res.mobile }}</text>
									<text class="tips" v-if="res.isDefault === 1">默认</text>
								</view>
								<view class="address">{{ res.address }}</view>
							</view>
						</view>
						<view class="right">
							<!-- <image class="image" @click="deleteAddress(res.id)" src="/static/images/common/delete.png"
								mode=""></image> -->
							<image class="image" @click="navigateEdit(res)" src="/static/images/mine/address/edit.png">
							</image>
						</view>
					</view>
				</view>
			</block>
			<!-- 无数据 -->
			<u-empty v-if="isNotNull" mode="news" icon="/static/images/mine/address/null_background.png" text="收货地址为空"
				textSize="18" width="220" height="220"></u-empty>
			<!-- 订单 - status: 2 -->
			<block v-if="status == 2" v-for="(res, index) in addressList" :key="index">
				<view class="address-box-two" @click="chooseAddress(res)">
					<view class="address-content-list">
						<view class="left">
							<view class="name-phone">
								<text class="name">{{ res.name }}</text>
								<text class="phone">{{ res.mobile }}</text>
							</view>
							<view class="address"><text v-if="res.isDefault === 1" class="tips">[ 默认 ]
								</text>{{ res.address }}
							</view>
						</view>
						<view class="right" v-if="res.id === addressID">
							<image class="image" src="/static/images/common/select.png"></image>
						</view>
					</view>
				</view>
			</block>
			<view class="placeholder-bottom"></view>
			<view class="button-content" v-if="status == 1 || status == 3">
				<view class="button" @click="navigateAdd">添加收货地址</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		addresslist,
		deladdress
	} from '@/common/api.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 页面跳转选择 */
				status: 1, // 默认 编辑收货地址
				addressID: 0, // 选择地址ID

				/* 地址列表 */
				addressList: [], // 收货地址列表
				isNull: 0, // 地址列表状态 ( 0 - 有数据 | 1 - 没有数据 )
				isNotNull: false, // 地址列表是否为空
			};
		},
		onLoad(option) {
			/* 页面排版 */
			this.status = option.style;
			this.addressID = parseInt(option.id);
		},
		onShow() {
			/* 获取收货地址 */
			this.getAddressList();
		},
		methods: {

			/* 获取收货列表 */
			getAddressList() {
				const that = this;
				addresslist().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						if (result.length === 0) {
							that.isNull = 1;
							that.isNotNull = true;
							that.addressList = [];
						} else {
							that.addressList = result.map(item => {
								return {
									id: item.addressId,
									name: item.name,
									mobile: item.phone,
									address: item.provinceName + " " + item.cityName + " " + item
										.areaName + " " + item
										.userAddress,
									detailAddress: item.userAddress,
									province: item.provinceName,
									city: item.cityName,
									area: item.areaName,
									provinceId: item.provinceId,
									cityId: item.cityId,
									areaId: item.areaId,
									isDefault: item.isDefault
								};
							});
							if (that.addressList.length === 0) {
								that.isNull = 1;
								that.isNotNull = true;
							} else {
								that.isNull = 0;
								that.isNotNull = false;
								if (parseInt(that.status) === 3) {
									that.status = 2;
								}
							};
						}
					} else {
						Fn.Toast(res.msg, 3, 1500)
					};
				});
			},

			/* 下单页面选择收货地址 */
			chooseAddress(option) {
				this.addressID = option.id;
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; // 当前页页面实例
				let prevPage = pages[pages.length - 2]; // 上一页页面实例
				let object = option;
				prevPage.$vm.getChoose(object) // 給上一頁綁定方法otherFun,傳參object
				setTimeout(() => {
					uni.navigateBack({
						delta: 1 // 可以不傳delta值，默認為1
					});
				}, 300);
			},

			/* 删除收货地址 */
			deleteAddress(id) {
				const that = this;
				const params = {
					addressId: id
				};
				deladdress(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						Fn.Toast('删除成功', 3, 700);
						that.getAddressList();
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 跳转至修改地址页面 */
			navigateEdit(option) {
				const params = {
					id: option.id,
					consignee: option.name,
					mobile: option.mobile,
					address: option.detailAddress,
					province: option.province,
					city: option.city,
					area: option.area,
					provinceId: option.provinceId,
					cityId: option.cityId,
					areaId: option.areaId,
					isDefault: option.isDefault
				};
				uni.navigateTo({
					url: '/pages/mine/address/editAddress/editAddress?option=' + encodeURIComponent(JSON.stringify(
						params)),
				});
			},

			/* 跳转至添加地址页面 */
			navigateAdd() {
				uni.navigateTo({
					url: '/pages/mine/address/addAddress/addAddress?isNull=' + this.isNull,
				});
			},
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #fafafa;
	// }

	uni-page-body {
		background: none;
	}

	.mine-address {

		.content {
			padding: 30rpx 36rpx;

			.address-box {

				.address-content-list {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.address-image {
							width: 80rpx;
							height: 80rpx;
						}

						.address-content {
							margin-left: 20rpx;

							.name-phone {
								font-family: AlibabaPuHuiTi_2_65_Medium;

								.name {
									font-size: 36rpx;
								}

								.phone {
									margin-left: 20rpx;
									font-size: 28rpx;
								}

								.tips {
									margin-left: 20rpx;
									padding: 2rpx 20rpx;
									color: #F71D1F;
									font-size: 22rpx;
									border: 1px solid #F71D1F;
									border-radius: 50rpx;
								}
							}
						}

						.address {
							width: 500rpx;
							margin-top: 12rpx;
							color: #B4B4B7;
							font-size: 28rpx;
							font-family: AlibabaPuHuiTi_2_55_Regular;
						}
					}

					.right {

						.image {
							width: 4vw;
							height: 4vw;

							&:nth-of-type(n+2) {
								margin-left: 26rpx;
							}
						}
					}
				}

				&:nth-of-type(n+2) {
					margin-top: 30rpx;
				}
			}

			.address-box-two {
				background-color: #FFFFFF;
				border-radius: 8px;
				cursor: pointer;

				&:nth-of-type(n+2) {
					margin-top: 30rpx;
				}

				.address-content-list {
					padding: 30rpx 36rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						width: 90%;

						.name-phone {
							// font-weight: 600;
							font-family: PingFang_Bold;

							.name {
								font-size: 36rpx;
								margin-right: 30rpx;
							}

							.phone {
								font-size: 28rpx;
							}
						}

						.address {
							margin-top: 12rpx;
							color: #B4B4B7;
							font-size: 28rpx;

							.tips {
								margin-right: 20rpx;
								color: #000000;
							}
						}
					}

					.right {

						.image {
							width: 4vw;
							height: 4vw;
							cursor: pointer;

							&:nth-of-type(n+2) {
								margin-left: 26rpx;
							}
						}
					}
				}
			}

			.button-content {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 40rpx 60rpx;

				.button {
					height: 94rpx;
					background-color: #F71D1F;
					margin: 0 auto;
					color: #FFFFFF;
					font-size: 32rpx;
					font-family: AlibabaPuHuiTi_2_85_Bold;
					line-height: 94rpx;
					text-align: center;
					border-radius: 10rpx;
				}
			}

			.placeholder-bottom {
				height: 94rpx;
				padding: 40rpx 60rpx;
			}
		}
	}
</style>
